<template>
  <div class="order-page">
    <div class="header">
      <span class="title">委外订单</span>
      <div class="btn">
        <el-button round size="mini" type="success" icon="el-icon-check">
          标 &ensp; 记&ensp;
        </el-button>
        <el-button round size="mini" type="success" icon="el-icon-close"
          >取消标记</el-button
        >
        <el-button
          round
          size="mini"
          type="success"
          icon="el-icon-picture-outline"
        >
          挑 图
        </el-button>
        <el-button
          round
          size="mini"
          type="success"
          icon="el-icon-files"
          @click="goPack"
        >
          打 包
        </el-button>
      </div>
      <div class="form">
        <el-form
          :inline="true"
          :model="searchForm"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item label="" style="width: 90px">
            <el-select placeholder="">
              <el-option label="参数名称" value="1"></el-option>
              <el-option label="物料编码" value="2"></el-option>
              <el-option label="物料名称" value="3"></el-option>
              <el-option label="规格型号" value="4"></el-option>
              <el-option label="单据号" value="5"></el-option>
              <el-option label="项目号" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 140px">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 60px">
            <el-select placeholder="">
              <el-option label="条件" value="1"></el-option>
              <el-option label="或" value="2"></el-option>
              <el-option label="且" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 90px">
            <el-select placeholder="">
              <el-option label="参数名称" value="1"></el-option>
              <el-option label="物料编码" value="2"></el-option>
              <el-option label="物料名称" value="3"></el-option>
              <el-option label="规格型号" value="4"></el-option>
              <el-option label="单据号" value="5"></el-option>
              <el-option label="项目号" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 140px">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="" style="width: 60px">
            <el-select placeholder="">
              <el-option label="条件" value="1"></el-option>
              <el-option label="或" value="2"></el-option>
              <el-option label="且" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 90px">
            <el-select placeholder="">
              <el-option label="参数名称" value="1"></el-option>
              <el-option label="物料编码" value="2"></el-option>
              <el-option label="物料名称" value="3"></el-option>
              <el-option label="规格型号" value="4"></el-option>
              <el-option label="单据号" value="5"></el-option>
              <el-option label="项目号" value="6"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="width: 140px">
            <el-input></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain icon="el-icon-search">
              搜 索
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="save-btn">
        <el-button size="small" type="success" icon="el-icon-folder">
          保 存
        </el-button>
      </div>
    </div>
    <div class="body">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        header-align="center"
        height="700"
      >
        <el-table-column fixed type="selection" align="center">
        </el-table-column>
        <el-table-column prop="name" label="标记者" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="province"
          label="标记时间"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="city" label="状态" width="120" align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          label="单据号"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="zip" label="项目号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="物料编码" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="物料名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="规格型号" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="基本单位" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="文件名称" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="表面处理" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="项目交期" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="申请数量" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="批准数量" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="申请人" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="部门" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="申请日期" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="审核日期" width="120" align="center">
        </el-table-column>
        <el-table-column prop="zip" label="备注" width="120" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="预览" width="100" align="center">
          <template v-slot="{ row }">
            <el-button type="warning" plain @click="view(row)" size="small"
              >预览</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {},
      tableData: [{ zip: 1 }, { zip: 1 }],
    };
  },
  created() {},
  methods: {
    view() {},
    goPack() {
      this.$router.push({
        path: "/pack",
        query: {
          // url的参数, 类似get请求的传参
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.order-page {
  background-color: #fff;

  .header {
    padding: 30px 20px;
    display: flex;
    justify-content: space-between;
    .title {
      padding-top: 7px;
    }
    .btn {
      display: inline-block;
      // margin-left: 20px;
    }
    .form {
      display: inline-block;
      // margin-left: 20px;

      // ::v-deep .el-form-item__content {
      //   width: 100px;
      // }
    }

    .save-btn {
      display: inline-block;
    }
  }
  .body {
    padding: 20px;
  }
}
</style>